<template>
  <div class="app-container">
    <vxe-split class="content" border>
      <vxe-split-pane width="30%">
        <div style="margin-right: 20px">
          <vxe-button status="primary" @click="reflushNode()">刷新</vxe-button>
          <vxe-button status="primary" @click="addRootNode()"
            >添加根节点</vxe-button
          >

          <vxe-input
            v-model="val2"
            placeholder="可清除"
            type="search"
            clearable
            style="width: 100%"
          ></vxe-input>
          <vxe-tree transform :data="treeList">
            <template #extra="{ node }">
              <vxe-button
                mode="text"
                status="success"
                icon="vxe-icon-search"
                @click="lookdetail(node)"
                >查看</vxe-button
              >
              <vxe-button
                mode="text"
                status="primary"
                icon="vxe-icon-add"
                @click="addRow(node)"
                >新增</vxe-button
              >
              <vxe-button
                mode="text"
                status="error"
                icon="vxe-icon-delete-fill"
                @click="deleteRow(node)"
                >删除</vxe-button
              >
            </template>
          </vxe-tree>
        </div>
      </vxe-split-pane>

      <vxe-split-pane width="70%">
        <el-row style="height: 20%; width: 100%">
          <el-descriptions :column="3" border style="width: 100%">
            <el-descriptions-item
              label="名称"
              label-class-name="my-label"
              content-class-name="my-content"
              >{{ rowData.title }}</el-descriptions-item
            >
            <el-descriptions-item label="编码">{{
              rowData.code
            }}</el-descriptions-item>
            <el-descriptions-item label="层级">{{
              rowData.level
            }}</el-descriptions-item>
            <el-descriptions-item label="创建人">
              <el-tag size="small">{{ rowData.createBy }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item
              label="创建时间"
              :contentStyle="{ 'text-align': 'right' }"
              >{{ rowData.createTime }}</el-descriptions-item
            >
          </el-descriptions>
        </el-row>
        <el-row style="height: 80%">
          <vxe-button
            status="success"
            icon="vxe-icon-search"
            @click="lookdetail(node)"
            >选中当月所有数据</vxe-button
          >
          <vxe-button status="primary" icon="vxe-icon-add" @click="addRow(node)"
            >批量编辑日历班次</vxe-button
          >
          <vxe-button
            status="error"
            icon="vxe-icon-delete-fill"
            @click="deleteRow(node)"
            >取消选中当前所有日期</vxe-button
          >
          <vxe-calendar v-model="val"></vxe-calendar>
        </el-row>
      </vxe-split-pane>
    </vxe-split>

    <vxe-modal
      v-model="showPopup"
      v-bind="modalOptions"
      show-footer
      :loading="loading"
      show-confirm-button
      @confirm="confirmEvent"
    >
      <template #default>
        <vxe-grid
          ref="gridRef"
          :confirm-closable="false"
          v-bind="gridOptions"
          @toolbar-button-click="toolbarButtonClickEvent"
          @form-submit="formSubmitEvent"
          @form-reset="formResetEvent"
        >
        </vxe-grid>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import {
  getEquipmentLevelByPage,
  addEquipmentLevel,
  delEquipmentLevel,
} from "@/api/baseData/equipmentLevel";
import {
  getEquipmentTreeByPage,
  addEquipmentTree,
  delEquipmentTree,
} from "@/api/baseData/equipmentTree";
import {
  getEquipmentConfigByPage,
  addEquipmentConfig,
  delEquipmentConfig,
} from "@/api/baseData/equipmentConfig";
import { VxeUI } from "vxe-pc-ui";
import useAppStore from "@/store/modules/app";
import { Splitpanes, Pane } from "splitpanes";
import { useRouter, useRoute } from "vue-router";
import "splitpanes/dist/splitpanes.css";
const router = useRouter();
const appStore = useAppStore();
const findPageList = async (page) => {
  await getMaterialByPage(page);
  // return new Promise(resolve => {
  //   setTimeout(() => {
  //     resolve({
  //       result: list.slice((currentPage - 1) * pageSize, currentPage * pageSize),
  //       page: {
  //         total: list.length
  //       }
  //     })
  //   }, 100)
  // })
};
export default {
  data() {
    const formOptions1 = {
      border: true,

      titleBackground: true,
      data: {
        name: "test1",
        nickname: "Testing",
        status: "1",
        sex: "1",
        amount: 10000000,
        age: "54",
      },
      items: [
        { field: "name", title: "名称", span: 8 },
        { field: "status", title: "状态", span: 8, formatter: "mySwitch" },
        { field: "amount", title: "金额", span: 8, formatter: "myAmount" },
      ],
    };
    const treeList = [{ title: "", id: "", parentId: null }];
    const gridOptions = {
      sortConfig: {
        remote: true,
      },
      loading: false,
      stripe: true,
      showOverflow: true,
      showFooter: true,

      columnConfig: {
        resizable: true,
        drag: true,
      },
      columnDragConfig: {
        trigger: "cell",
        showIcon: false,
        showGuidesStatus: true,
      },
      rowConfig: {
        isHover: true,
      },
      resizableConfig: {
        isDblclickAutoWidth: true,
      },
      pagerConfig: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      height: 600,
      maxHeight: 800,
      formConfig: {
        data: {
          name: "",
          role: "",
          sex: "",
          num: "",
          address: "",
        },
        items: [
          {
            field: "name",
            title: "名称",
            span: 6,

            itemRender: { name: "VxeInput", props: { clearable: true } },
          },
          {
            field: "code",
            title: "编码",
            span: 6,

            itemRender: { name: "VxeInput", props: { clearable: true } },
          },

          {
            field: "createTime",
            title: "时间",
            span: 6,

            itemRender: {
              name: "VxeDatePicker",
              props: {
                multiple: true,
                clearable: true,
              },
            },
          },

          {
            align: "right",
            span: 6,
            itemRender: {
              name: "VxeButtonGroup",
              options: [
                { type: "submit", content: "搜索", status: "primary" },
                { type: "reset", content: "重置" },
              ],
            },
          },
        ],
      },
      columns: [
        { type: "checkbox", width: 60 },
        { field: "seq", type: "seq", width: 70 },

        { field: "code", title: "编码", sortable: true, width: 180 },
        {
          field: "name",
          title: "名称",
          sortable: true,
          width: 180,
        },
        {
          field: "level",
          title: "资源等级",
          sortable: true,
          width: 180,
        },
        { field: "createBy", title: "创建人", width: 180 },
        { field: "createTime", title: "创建时间", width: 180 },
      ],
      scrollX: {
        gt: 0,
        enabled: true,
      },
      scrollY: {
        gt: 0,
        enabled: false,
      },
      proxyConfig: {
        // props: {
        //   result: 'result', // 配置响应结果列表字段
        //   total: 'page.total' // 配置响应结果总页数字段
        // },

        sort: true,
        form: true,
        ajax: {
          query: async ({ page, sorts, form }) => {
            console.log(page, sorts, form, "----");
            // 默认接收 Promise<{ result: [], page: { total: 100 } }>
            let result = await getEquipmentConfigByPage({
              ...page,
              ...form,
            });
            return {
              result: result.data.records,
              page: {
                total: result.data.total,
              },
            };
          },
        },
      },
    };
    const showPopup = false;
    const modalOptions = {
      title: "在弹窗中使用表单",
      width: "80%",

      escClosable: true,
      // resize: true,
      // showMaximize: true,
      //禁止拖动
      draggable: false,
    };
    const sexItemRender = {
      name: "VxeSelect",
      options: [
        { label: "女", value: "Women" },
        { label: "男", value: "Man" },
      ],
    };
    const formOptions = {
      data: {
        name: "",
        role: "",
        sex: "",
        age: "",
        address: "",
      },
      rules: {
        name: [{ required: true, message: "名称必填" }],
        // role: [{ required: true, message: "角色必填" }],
        // sex: [{ required: true, message: "性别必选" }],
        // age: [
        //   { required: true, message: "年龄必填" },
        //   { type: "number", min: 18, max: 46, message: "年龄范围18~46" },
        // ],
      },
      items: [
        {
          field: "code",
          title: "编码",
          span: 24,
          itemRender: { name: "VxeInput" },
        },
        {
          field: "name",
          title: "名称",
          span: 24,
          itemRender: { name: "VxeInput" },
        },
        // {
        //   field: "role",
        //   title: "角色",
        //   span: 24,
        //   itemRender: { name: "VxeInput" },
        // },
        // { field: "sex", title: "性别", span: 12, itemRender: sexItemRender },
        // {
        //   field: "age",
        //   title: "年龄",
        //   span: 12,
        //   itemRender: { name: "VxeNumberInput", props: { type: "integer" } },
        // },
        // {
        //   field: "address",
        //   title: "地址",
        //   span: 24,
        //   itemRender: { name: "VxeTextarea" },
        // },
        {
          align: "center",
          span: 24,
          itemRender: {
            name: "VxeButtonGroup",
            options: [
              { type: "submit", content: "提交", status: "primary" },
              { type: "reset", content: "重置" },
            ],
          },
        },
      ],
    };
    const rowData = {};
    return {
      gridOptions,
      showPopup,
      modalOptions,
      sexItemRender,
      formOptions,
      loading: false,
      treeList,
      formOptions1,
      rowData,
    };
  },
  async created() {
    const result = await getEquipmentTreeByPage({
      currentPage: 1,
      pageSize: 100,
    });
    console.log(result.data.records, "---result.data.records");
    this.treeList = result.data.records.map((item) => {
      return {
        title: item.name,
        id: item.id,
        parentId: item.parentId,
        code: item.code,
        level: item.level,
        createBy: item.createBy,
        createTime: item.createTime,
      };
    });

    // this.sexItemRender.options = result.data.records.map((item) => {
    //   return {
    //     value: item.id,
    //     label: item.name,
    //   };
    // });

    // return {
    //   result: result.data.records,
    //   page: {
    //     total: result.data.total,
    //   },
    // };
  },
  methods: {
    toolbarButtonClickEvent(params) {
      if (params.code == "myAdd") {
        this.showPopup = true;
      }
      console.log(params.code);
    },
    formSubmitEvent() {
      console.log("form submit");
    },
    formResetEvent() {
      console.log("form reset");
    },
    //表单的提交
    async submitEvent() {
      this.loading = true;
      await addEquipmentConfig(this.formOptions.data);
      console.log("保存成功", JSON.stringify(this.formOptions.data));
      const $grid = this.$refs.gridRef.commitProxy("reload");
      VxeUI.modal.message({ content: "保存成功", status: "success" });
      this.loading = false;
      this.showPopup = false;
    },
    //表单的重置
    resetEvent() {
      console.log("重置事件");
    },
    updateRow(row) {
      this.formOptions.data = row;
      this.showPopup = true;
      console.log(row.id, "---row---");
    },
    async deploy(row) {
      this.formOptions.data = row;
      console.log(row.id, "---row---");
      await camundaModelDeploymentById(row);
    },
    designRow(row) {
      this.$router.push({
        path: "/flowable/bpmtest",
        query: {
          id: row.id,
        },
      });

      console.log(row.id, "---row---");
    },
    async deleteRow(row) {
      try {
        await delEquipmentTree({ id: row.id });
      } catch (error) {
      } finally {
        let result = await getEquipmentTreeByPage({
          currentPage: 1,
          pageSize: 1000,
        });
        this.treeList = result.data.records.map((item) => {
          return {
            title: item.name,
            id: item.id,
            parentId: item.parentId,
            code: item.code,
            level: item.level,
            createBy: item.createBy,
            createTime: item.createTime,
          };
        });
      }
      //删除节点
    },
    addRootNode() {
      this.showPopup = true;
      console.log("==>弹出框===");
    },
    async reflushNode() {
      let result = await getEquipmentTreeByPage({
        currentPage: 1,
        pageSize: 1000,
      });
      this.treeList = result.data.records.map((item) => {
        return {
          title: item.name,
          id: item.id,
          parentId: item.parentId,
          code: item.code,
          level: item.level,
          createBy: item.createBy,
          createTime: item.createTime,
        };
      });
    },
    async confirmEvent() {
      const selectKeys = this.$refs.gridRef.getCheckboxRecords();
      console.log(selectKeys[0].id, "--selectKeys-");
      await addEquipmentTree({
        levelId: selectKeys[0].id,
        parentId: this.rowData.id,
      });

      //请求远程
      let result = await getEquipmentTreeByPage({
        currentPage: 1,
        pageSize: 1000,
      });
      this.treeList = result.data.records.map((item) => {
        return {
          title: item.name,
          id: item.id,
          parentId: item.parentId,
          code: item.code,
          level: item.level,
          createBy: item.createBy,
          createTime: item.createTime,
        };
      });
      // return {
      //   result: result.data.records,
      //   page: {
      //     total: result.data.total,
      //   },
      // };

      this.showPopup = false;
      // VxeUI.modal.message({
      //   content: "点击确认",
      // });
    },

    addRow(rowData) {
      this.showPopup = true;
      this.rowData = rowData;
      console.log(rowData, "---rowData---");
    },
    lookdetail(rowData) {
      this.rowData = rowData;
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  height: calc(100vh - 130px);
}
</style>
